<ion-view  class="circle-bg-dark">

  <ion-nav-buttons side="left">
    <button class="button button-clear visible-xs" ng-click="closeModal()" translate>COMMON.BTN_CANCEL
    </button>
  </ion-nav-buttons>

  <ion-nav-title>
    <span class="title visible-xs" translate>API.TRANSFER.TITLE_SHORT</span>
  </ion-nav-title>

  <ion-nav-buttons side="right">
    <!-- locales -->
    <button class="button button-clear hidden-xs hidden-sm gray icon-left"
            style="max-width: 450px !important"
            ng-click="showLocalesPopover($event)">
      <i class="icon ion-earth" ></i>
      {{$root.settings.locale.label}}
      <small class="ion-arrow-down-b"></small>
    </button>

    <button class="button button-positive button-icon button-clear icon ion-android-done visible-xs" ng-click="doLogin()">
    </button>
  </ion-nav-buttons>

  <ion-content class=" has-header no-padding-xs positive-900-bg">

    <br class="hidden-xs"/>

    <div class="row no-padding-xs">
      <div class="col col-20 hidden-xs hidden-sm">
        &nbsp;
      </div>
      <div class="col no-padding-xs">

        <div class="light-bg">

          <h2 class="padding-top text-center hidden-xs" translate>API.TRANSFER.TITLE</h2>

          <div class="no-padding energized-100-bg" ng-if="demo">
            <div class="item item-icon-left item-text-wrap no-border">
              <i class="icon ion-information-circled positive" ></i>
              <p translate>API.TRANSFER.DEMO.HELP</p>
            </div>
          </div>

          <ng-include src="'templates/login/form_login.html'"></ng-include>

        </div>
        <br class="hidden-xs"/>
        <br class="hidden-xs"/>
        <div class="list padding no-padding-xs light-bg expert-mode">
          <div class="item">
            <p translate>API.TRANSFER.SUMMARY</p>
          </div>

          <div class="item item-icon-left-padding item-tx no-border ">
            <h2 translate>API.TRANSFER.AMOUNT</h2>
            <div class="badge item-note badge-calm" ng-bind-html="transferData.amount|formatAmount:{useRelative: false, currency: $root.currency.name}"></div>
            <div class="badge badge-secondary" ng-bind-html="transferData.amount|formatAmount:{useRelative: true, currency: $root.currency.name}"></div>
          </div>
          <div class="item item-icon-left-padding" ng-if="transferData.name">
            <h2 translate>API.TRANSFER.NAME</h2>
            <div class="badge item-note">
              {{transferData.name}}
            </div>
          </div>
          <div class="item item-icon-left-padding item-text-wrap">
            <h2 translate>API.TRANSFER.PUBKEY</h2>
            <div class="badge">
              <span class="hidden-xs"><br class="visible-sm visible-md"/><i class="icon ion-key"> </i>{{transferData.pubkey}}</span>
              <span class="visible-xs" copy-on-click="{{transferData.pubkey}}"><br class="visible-xs"/><i class="icon ion-key"></i> {{transferData.pubkey|formatPubkey}}</span>
            </div>
          </div>

          <div class="item item-icon-left-padding">
            <h2 translate>API.TRANSFER.COMMENT</h2>
            <div class="badge item-note">
              <span class="hidden-xs"><br class="visible-sm visible-md"/>{{transferData.comment}}</span>
              <span class="visible-xs" copy-on-click="{{transferData.comment}}"><br/>{{transferData.comment}}</span>
            </div>
          </div>
          <!-- spacer in small screen -->
          <div class="padding-bottom visible-xs">&nbsp;</div>
        </div>
      </div>
      <div class="col col-20 hidden-xs hidden-sm text-center" id="home" >
        <div style="display: block; width: 100%;">
          <div class="logo text-center"></div>
          <small class="gray padding-top">v{{$root.config.version}}</small>
        </div>
      </div>
    </div>

    <p class="visible-xs visible-sm light padding-top text-center">
      {{'COMMON.APP_NAME'|translate}}
      - <a href="#" ng-click="showAboutModal($event)">v{{$root.config.version}}</a>
    </p>

    <p class="hidden-xs hidden-sm gray padding-top text-center">
      {{'COMMON.APP_NAME'|translate}} API v{{$root.config.version}}
      - <a href="#" ng-click="showAboutModal($event)" title="{{'HOME.BTN_ABOUT'|translate}}">{{'HOME.BTN_ABOUT'|translate}}</a>
      - <a ui-sref="app.home" target="_system" title="{{'API.COMMON.LINK_DOC_HELP'|translate}}">{{'API.COMMON.LINK_DOC'|translate}}</a>
      - <a href="../" title="{{'API.COMMON.LINK_STANDARD_APP_HELP'|translate}}">{{'API.COMMON.LINK_STANDARD_APP'|translate}}</a>
    </p>

  </ion-content>
</ion-nav-view>
